import "./index.scss"
import store from "../../../store";  //哪个组件需要用到store的数据就在哪个组件引入
import {observer} from 'mobx-react';
import {Button, Space, Table, message, Modal, Form, Input, Select} from 'antd';
import React, {useState} from 'react';
import {useNavigate} from "react-router-dom";


const MemberContentList = () => {
    const {Option} = Select;
    const [form] = Form.useForm();
    //因为是useNavigate所以要声明
    const navigate = useNavigate();

    //删除表格数据模态框
    const [isDeletModalO, setisDeletModalO] = useState(false)
    //选中
    const [selectionType, setSelectionType] = useState('checkbox');
    //查看-模态框
    const [ischakan, setIschakan] = useState(false);

    const [checkId, setCheckId] = useState()
    //当前选中的标签,设置显示模态框数据
    const [checkLabel, setCheckLabel] = useState({})

    //删除表格数据-模态框
    const DeleteList = (val) => {
        setisDeletModalO(true);
        console.log("此条数据内容:", val);
        setCheckId(val)
    }
    //删除表格数据模态框-确认
    const deletOk = () => {
        setisDeletModalO(false);
        let arr = [...store.memberShip.memberTableList]
        console.log(arr)
        arr.forEach((v, i) => {
            console.log(v.id, checkId)
            if (v.id === checkId) {
                arr.splice(i, 1)
                console.log(arr)
                store.memberShip.setMemberTableList(arr)
                message.success('删除该条数据成功')
            }
        })
    };
    //删除表格数据模态框-取消
    const deletCancel = () => {
        setisDeletModalO(false);

    };


    //点击查看
    const LookList = (values) => {
        console.log("此条数据内容", values);
        //查看弹出模态框
        setIschakan(true);
        setCheckLabel(values)
    }
    //查看ok
    const chakanOk = () => {
        setIschakan(false);
    }

    const chakanCancel = () => {
        setIschakan(false);
    }

    //点击编辑
    const EditList = (val) => {
        console.log("此条数据内容", val);
        // 路由跳转
        navigate('/home/MemberDetails', {state: {val: val}})
    }


    //多选
    const onSelectChange = (selectedRowKeys, selectedRows, {type}) => {
        store.memberShip.setSelectRowKeys(selectedRowKeys)
    }
    const columns = [
        {
            title: '会员ID',//表格列名
            dataIndex: 'id',//对应数据字段
            render: (text) => <span className={"contentId"}>{text}</span>,
        },
        {
            title: '手机号',
            dataIndex: 'telnumber',
        },
        {
            title: '关联小程序',
            dataIndex: 'relation',
        },
        {
            title: '加盟商',
            dataIndex: 'Franchisee',
        },
        {
            title: '状态',
            dataIndex: 'state',
            render: (text, {state}) => <span className={state === '冻结' ? 'colorRed' : ''}>{text}</span>
        },
        {
            title: '积分',
            dataIndex: 'integral',
        },
        {
            title: '消费金额',
            dataIndex: 'ConsumptionAmount',
        },
        {
            title: '会员标签',
            dataIndex: 'MemberLabel',
            render: (_, {MemberLabel}) => (
                <>
                    {MemberLabel.map(label => {
                        return (
                            <div className={"label"} key={label}>
                                {label}
                            </div>
                        );
                    })}
                </>
            ),
        },
        {
            title: '注册时间',
            dataIndex: 'RegistrationTime',
        },
        {
            title: '注册来源',
            dataIndex: 'SourceOfRegistration',
        },
        {
            title: '操作',

            render: (_, record) => (
                <Space size="middle" className="czbtn">
                    <Button type={"link"} onClick={() => {
                        EditList(record)
                    }}>编辑</Button>
                    <Button type={"link"} onClick={() => {
                        DeleteList(record.id)
                    }}>删除</Button>
                    <Button type={"link"} onClick={() => {
                        LookList(record)
                    }}>查看</Button>
                </Space>
            )
        },
    ];


    return (
        <div id={'content_table'}>
            <Table
                rowSelection={{
                    type: selectionType,
                    onChange: onSelectChange,
                }}
                columns={columns}
                dataSource={store.memberShip.memberTableList}
                rowKey={(record) => record.id}
                rowClassName={'rowColor'}
                className={'table'}
                pagination={{pageSize: 5}}
                // selectedRowKeys={[1]}
            />

            <Modal
                title="删除此条数据"
                open={isDeletModalO}
                onOk={deletOk}
                okText={"确定"}
                onCancel={deletCancel}
                cancelText={"取消"}
            >
                <p>确定删除该条数据吗？</p>
            </Modal>

            {/*查看弹出模态框*/}
            <Modal
                title="查看"
                open={ischakan}
                onOk={chakanOk}
                okText={"确定"}
                onCancel={chakanCancel}
                cancelText={"取消"}
                destroyOnClose={true}
            >
                <Form
                    name="chakan"
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 14,
                    }}
                    layout="horizontal"
                    initialValues={checkLabel}
                >
                    <Form.Item label="会员ID" name="id">
                        <Input disabled={true} className={'inputBox'}/>
                    </Form.Item>
                    <Form.Item label="手机号" name="telnumber">
                        <Input disabled={true} className={'inputBox'}/>
                    </Form.Item>
                    <Form.Item label="关联小程序" name="relation">
                        <Select
                            allowClear
                            style={{width: '280px'}}
                            disabled={true}
                        >
                            <Option value="是">是</Option>
                            <Option value="否">否</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="加盟商" name="Franchisee">
                        <Select
                            disabled={true}
                            allowClear
                            style={{width: '280px'}}
                        >
                            <Option value="西湖黄龙店">西湖黄龙店</Option>
                            <Option value="西湖西溪店">西湖西溪店</Option>
                            <Option value="西湖古墩店">西湖古墩店</Option>
                            <Option value="西湖湖畔店">西湖湖畔店</Option>
                            <Option value="西湖武林店">西湖武林店</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="状态" name="state">
                        <Select
                            disabled={true}
                            allowClear
                            style={{width: '280px'}}
                        >
                            <Option value="正常">正常</Option>
                            <Option value="冻结">冻结</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="积分" name="integral">
                        <Input disabled={true} className={'inputBox'}/>
                    </Form.Item>
                    <Form.Item label="消费金额" name="ConsumptionAmount">
                        <Input disabled={true} className={'inputBox'}/>
                    </Form.Item>
                    <Form.Item label="会员标签" name="MemberLabel">
                        <Input disabled={true} className={'inputBox'}/>
                    </Form.Item>
                    <Form.Item label="注册时间" name="RegistrationTime">
                        <Input disabled={true} className={'inputBox'}/>
                    </Form.Item>
                    <Form.Item label="注册来源" name="SourceOfRegistration">
                        <Select
                            disabled={true}
                            allowClear
                            style={{width: '280px'}}
                        >
                            <Option value="全部">全部</Option>
                            <Option value="小黑早教">小黑早教</Option>
                            <Option value="小黑绘本">小黑绘本</Option>
                            <Option value="萌萌乐卡通">萌萌乐卡通</Option>
                            <Option value="萌萌儿歌">萌萌儿歌</Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>


        </div>
    )

}
export default observer(MemberContentList)